<template>
  <div>
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      drawTiming: null,
      cdata: {
        category:["照明","送排风","空调"],
        day: [
          "1日",
          "2日",
          "3日",
          "4日",
          "5日",
          "6日",
          "7日",
          "8日",
          "9日",
          "10日",
          "11日",
          "12日",
          "13日",
          "14日",
          "15日",
          "16日",
          "17日",
          "18日",
          "19日",
          "20日",
          "21日",
          "22日",
          "23日",
          "24日",
          "25日",
          "26日",
          "27日",
          "28日",
          "29日",
          "30日"
        ],
        data:[]
      }
    }
  },
  components: {
    Chart,
  },
  mounted () {
    this.drawTimingFn();
  },
  beforeDestroy () {
    clearInterval();
  },
  methods: {
    drawTimingFn () {
      this.setData();
    },
    setData () {
      for(let i =0 ; i<3; i++){
        const val = [];
        for(let j = 0; j<31; j++)
        {
          val.push(0)
        }
        this.cdata.data.push(val)
      }
    }
  },
  watch: {
    chartData: {
      handler (newData ) {
        if (newData.energy != null && newData.energy.deviceCategory !== undefined ) {
          const deviceEnergyCategory = newData.energy.deviceCategory
          const deviceEnergyData = newData.energy.deviceEnergyData
          const deviceEnergyDate = newData.energy.deviceEnergyDate
          this.cdata ={
            category:deviceEnergyCategory,
            day:deviceEnergyDate,
            data:deviceEnergyData
          }
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
